*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
p{

  
  border-radius:10px;
  padding:5px;
  border:2px solid white;
  background:lightgray;
  color:black;
  font-size:18px;
}
button{
  font-family: 'Sniglet', cursive;
}
body {
  background: linear-gradient(45deg, rgba(189,245,152,1) 0%, rgba(50,87,81,1) 100%);
  height:100%;
}
h1,h2{
  text-align:center;
  margin-bottom:20px;
  margin-top:10px;
  font-family: 'Londrina Outline', cursive;
}
#control{width:200px;margin: 20px auto;}
#control h2{font-family: 'Sniglet', cursive;}
#control button{padding:5px;}
#container{
  width:400px;
  height:500px;
  background: linear-gradient(to bottom, rgba(242,246,248,1) 0%, rgba(216,225,231,0.54) 49%, rgba(181,198,208,0.52) 51%, rgba(224,239,249,0.06) 100%);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid #d6ced6;
  box-shadow: 0px 14px 30px -9px rgba(0,0,0,0.74);
  margin: 20px auto;
  overflow:hidden;
  z-index:5;
}
.screen{
 width:inherit; 
 height:inherit;
}
#splash{
  display:none;
  text-align:center;
}
  #splash h1{
      margin-top:70px;
      font-size:80px;
  }
  #splash h1 .char1{
      color:#93C683;
  }
  #splash h1 .char2{
      color:rgb(75, 160, 108);
  }
  #splash #start{
      background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
      color:black;
      border-radius: 10px;
      margin-top:140px;
      padding:10px;
      font-size:50px;
  }
#pause{
  display:none;
  position:absolute;
  background: rgba(50,50,50,0.4);
  z-index:1;
  border-radius: 16px 16px 16px 16px;
  text-align:center;
}
  #pause h1{
      margin-top:150px;
      color:orange;
  }
  #pause button{
      display:block;
      background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
      border-radius: 10px;
      padding:10px;
      color:black;
      margin:20px auto;
      font-size:30px;
  }
#end{
  display:none;
}
#game{
 padding:10px 10px; 
 position:relative;
 display:none;
}
#game #info{
  padding:5px 10px;
  background:gray; 
  margin:0 auto;
  width:200px;
}
#game #info #pausebtn {
  float:right;
}
#game #gamearea{
  position:absolute;
  bottom:50px;
  left:50px;
  width:300px;
  height:300px;
  background:gray;
}
#game #gamearea .element {
  width:75px;
  height:75px;
  background: transparent;
  border: 1px solid #d6ced6;
  display:inline-block;
  margin-right:-4px;
  margin-bottom:-4px;
  overflow:hidden;
  font-size:30px;
  line-height:2.2;
  text-align:center;
  font-family: 'Sniglet', cursive;
  color:white;
} 